<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link href="PagesUI/css/layout.css" rel="stylesheet" type="text/css" />
<link href="PagesUI/css/demo_table.css" rel="stylesheet" type="text/css" />
<link href="PagesUI/css/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="PagesUI/scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="PagesUI/scripts/jquery-ui-no-ajax.js"></script>
<script type="text/javascript" src="PagesUI/scripts/jquery.dataTables.js"></script>
<script type="text/javascript" src="PagesUI/scripts/lib.js"></script>
<script type="text/javascript">
	$(function() {
		$("#manuDetail").hide();
		var isEdit = true;
		$("thead th:last-child").hide();
		manuTable = $('#manuList').dataTable({
			/* "bJQueryUI": true,
			sPaginationType: "full_numbers", */
			"bProcessing" : true,
			"sAjaxSource" : "/MAP/dataManufacturer",
			"oLanguage": {
				"sProcessing": "<img src='PagesUI/images/loading.gif' id='productAdd' alt='Loading'/>"
	        },
			"fnServerData" : function(sSource, aoData, fnCallback) {
				$.ajax({
					"dataType" : 'json',
					"type" : "GET",
					"url" : sSource,
					"data" : aoData,
					"success" : fnCallback
				});
			},
			"fnDrawCallback": function( oSettings ) {
				$("#mytbody td:last-child").hide();
				$('#mytbody td:nth-child(3)').hide();
			    },
			"aoColumnDefs" : [ {
				"sWidth" : "15%",
				"aTargets" : [ 0 ],
				"sWidth" : "200px",
				"aTargets" : [ 1 ]
			} ],
			"aoColumns" : [ {
				"mData" : "id"
			}, {
				"mData" : "name"
			}, {
				"mData" : "address"
			}, {
				"mData" : "tel"
			}, {
				"mData" : "website"
			}, {
				"mData" : "desc"
			}

			],
			"aaSorting" : [ [ 0, "asc" ] ]

		}).hide();

		
		$("thead, #manuList").each(function(){
		    $(this).click(function(){
		    	$("#mytbody td:last-child").hide();
				$('#mytbody td:nth-child(3)').hide();
				//alert("run");
		    });
		});
		
		
		$("#manuList tbody").click(function(event) {
			//$("#manuDetail").empty();
			$("#msgManuName").hide();
			$("#msgPhone").hide();
			$("#msgAddress").hide();
			$(manuTable.fnSettings().aoData).each(function() {
				$(this.nTr).removeClass('row_selected');
			});
			$(event.target.parentNode).addClass('row_selected');
			var selected = fnGetSelected(manuTable);
			var formData = manuTable.fnGetData(selected[0]);
		});

		var strManuId = "-1";
		var strManuName;
		var strPhone;
		var strAddress;
		var strWebsite;
		var strDetail;

		$("#manuList tbody").delegate("tr", "click", function() {
			var firstCellText = $("td:first", this).text();
			var fourthCellText = $("td:eq(3)", this).text();
			$("#manuDetail").hide();
			strManuId = $("td:first", this).text();
			strManuName = $("td:eq(1)", this).text();
			strPhone = $("td:eq(3)", this).text();
			strAddress = $("td:eq(2)", this).text();
			strWebsite = $("td:eq(4)", this).text();
			strDetail = $("td:eq(5)", this).text();
			$("#manuId").val($("td:first", this).text());
			$("#manuName").val($("td:eq(1)", this).text());
			//alert("run");				
			$("#address").val($("td:eq(2)", this).text());
			$("#phone").val($("td:eq(3)", this).text());
			$("#website").val($("td:eq(4)", this).text());
			//$("#website").html($("td:eq(4)", this).text());
			//$("#siteManu").attr("href", "http://www.google.com/");
			/*
			$('<a>',{
			    text:$("td:eq(4)", this).text(),
			    href:'http://www.google.com.vn',
			    //click:function(){alert('test');return false;}
			}).appendTo('#website');
			 */
			$("#detail").val($("td:eq(5)", this).text());
			 $("#manuDetail").fadeIn(800);
			//alert(firstCellText);
		});

		var asInitVals = new Array();

		$("tfoot input").keyup(function() {
			/* Filter on the column (the index) of this element */
			manuTable.fnFilter(this.value, $("tfoot input").index(this));
			//alert($("tfoot input").index(this));
			$("#mytbody td:last-child").hide();
			$('#mytbody td:nth-child(3)').hide();
		});

		$("tfoot input").each(function(i) {
			asInitVals[i] = this.value;
		});
		$("tfoot input").focus(function() {
			if (this.className == "search_init") {
				this.className = "";
				this.value = "";
			}
		});

		$("tfoot input").blur(function(i) {
			if (this.value == "") {
				this.className = "search_init";
				this.value = asInitVals[$("tfoot input").index(this)];
			}
		});
		$('#saveManu')
				.click(
						function() {
							strManuId = $("#manuId").val();
							strManuName = $("#manuName").val();
							strPhone = $("#phone").val();
							strAddress = $("#address").val();
							strWebsite = $("#website").val();
							strDetail = $("#detail").val();

							if (strManuName == "") {
								if (!$("#msgManuName").length) {
									var msgManuName = '<tr id="msgManuName"><td colspan="2" align="center">Please enter name manufacture</td></tr>';
									$("#manuName").parent().parent().after(
											msgManuName);
									$("#msgManuName").css("color", "red");
								} else {
									$("#msgManuName").show();
								}
								$("#manuName").focus();
								return false;
							} else {
								$("#msgManuName").hide();
							}
							if (strPhone == "" || isNaN(strPhone)) {
								if (!$("#msgPhone").length) {
									var msgPhone = '<tr id="msgPhone"><td colspan="2" align="center">Please enter phone</td></tr>';
									$("#phone").parent().parent().after(
											msgPhone);
									$("#msgPhone").css("color", "red");
								} else {
									$("#msgPhone").show();
								}
								$("#phone").focus();
								return false;
							} else {
								$("#msgPhone").hide();
							}
							if (strAddress == "") {
								if (!$("#msgAddress").length) {
									var msgAddress = '<tr id="msgAddress"><td colspan="2" align="center">Please enter address</td></tr>';
									$("#address").parent().parent().after(
											msgAddress);
									$("#msgAddress").css("color", "red");
								} else {
									$("#msgAddress").show();
								}
								$("#address").focus();
								return false;
							} else {
								$("#msgAddress").hide();
							}
							if (confirm("Do you want to save " + strManuName
									+ " manufacture ?")) {
								//alert(strManuId+"-"+strManuName+"-"+strPhone+"-"+strAddress+"-"+strWebsite+"-"+strDetail);
								var my_json = {
									"id" : strManuId,
									"name" : strManuName,
									"address" : strAddress,
									"tel" : strPhone,
									"website" : strWebsite,
									"desc" : strDetail
								};

								if (isEdit) {
									$.ajax({
										type : "POST",
										url : "/MAP/editManufacturer",
										 contentType : "application/json",
										data : JSON.stringify(my_json),
										error : function(jqXHR, textStatus,
												errorThrown) {
											//window.location = window.location.href;
										},
										success : function(mydata) {
											manuTable.fnReloadAjax();
											resetFields()
										}
									});

								} else {
									$.ajax({
										type : "POST",
										url : "/MAP/addManufacturer",
										 contentType : "application/json",
										data : JSON.stringify(my_json),
										error : function(jqXHR, textStatus,
												errorThrown) {
											//window.location = window.location.href;
										},
										success : function(mydata) {
											manuTable.fnReloadAjax();
											resetFields();
										}
									});
									isEdit = true;
								}

							} else {
								alert("No manufacture saved");
							}
						});
		function resetFields() {
			$("#manuDetail").hide();
			//$("#manuId").val("-1");
			$("#manuId").val("");
			$("#manuName").val("");
			$("#phone").val("");
			$("#address").val("");
			$("#website").val("");
			$("#detail").val("");
			$("#manuDetail").fadeOut();
		}

		$('#addManu').click(function() {
			isEdit = false;
			resetFields();
			$("#manuDetail").fadeIn();
		});

		$('#removeManu').click(
				function() {
					var selected = fnGetSelected(manuTable);
					if (selected.length == 0) {
						alert('No item selected');
						return;
					}
					var formData = manuTable.fnGetData(selected[0]);

					if (confirm("Do you want to delete " + strManuName
							+ " manufacture ?")) {
						var ManufacturerID = formData.id;
						$.ajax({
							type : "POST",
							url : "deleteManufacturer",
							data : ManufacturerID,
							 contentType : "application/json",
							success : function(data) {
								manuTable.fnReloadAjax();
							},
							error : function(request, status, error) {
								alert(error);
							}
						});
					} else {
						alert("No item deleted");
					}
				});
	});
	
	
	jQuery(window).load(function() {

		setTimeout(function() {
			//alert('page is loaded and 1 minute has passed');   
		}, 60000);

	});
	$(document).ajaxComplete(function() {
		//alert('ajax is finished');
		$("#mytbody td:last-child").hide();
		$('#mytbody td:nth-child(3)').hide();

		$("#manuList").fadeIn(700);
	});
</script>
</head>
<body >
	<h1 id="test">${data}</h1>
	<div id="manuListPane" class="listpane" >
		<h2>
			Manufactures <img alt="Add Manufacture" src="PagesUI/images/add-icon.png"
				id="addManu"><img alt="Remove Manufacture"
				src="PagesUI/images/remove-icon.png" id="removeManu">
		</h2>
		<table class="display" id="manuList">
			<thead>
				<tr>
					<th>ID</th>
					<th>Name</th>
					<th style="display: none;">address</th>
					<th>Phone</th>
					<th>Website</th>
					<th>Description</th>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<th><input type="text" name="search_id" value="ID"
						class="search_init">
					</th>
					<th><input type="text" name="search_manufacture"
						value="Manufacture" class="search_init">
					</th>
					<th style="display: none;"><input type="text"
						name="search_address" value="Address" class="search_init">
					</th>
					<th><input type="text" name="search_phone" value="Phone"
						class="search_init">
					</th>
					<th><input type="text" name="search_website" value="website"
						class="search_init">
					</th>
				</tr>
			</tfoot>
			<tbody id="mytbody">
				<tr>
					<td colspan="6" class="dataTables_empty">Loading data from
						server</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div id="manuDetail" class="manudetail" style="border:1px solid black">
		<table>
			<tr>
				<td style="display: none;"><input type="text" id="manuId">
				</td>
				<td><img src="PagesUI/images/save-icon.png" alt="Save" id="saveManu">
				</td>
				<td id="tdManuName"><input type="text" id="manuName"
					name="manuName"
					style="font-size: 18pt; border: 1px #CCCCCC solid; width: 400px;">
				</td>
			</tr>
			<tr>
				<td>Phone:</td>
				<td id="tdPhone"><input type="text" id="phone" name="phone"
					style="font-size: 12pt; border: 1px #CCCCCC solid; width: 200px; padding: 3px;">
				</td>
			</tr>
			<tr>
				<td>Address:</td>
				<td id="tdAddress"><input type="text" id="address"
					name="address"
					style="font-size: 12pt; border: 1px #CCCCCC solid; width: 400px; padding: 3px;">
				</td>
			</tr>
			<tr>
				<td>Website</td>
				<td id="tdWebsite"><input type="text" id="website" name="phone"
					style="font-size: 12pt; border: 1px #CCCCCC solid; width: 200px; padding: 3px;">
				</td>
				<!--
				<td id="tdWebsite"><a id="siteManu" style="cursor: pointer;"><label id="website" style="font-size: 12pt;color: blue; width: 400px; padding: 3px;"></label></a></td>
				-->
			</tr>
			<tr>
				<td>Detail:</td>
				<td id="tdDetail"><textarea rows="5" id="detail" name="detail"
						style="width: 100%; font-size: 12pt; border: 1px #CCCCCC solid; padding: 3px;"></textarea>
				</td>
			</tr>
		</table>
	</div>
</body>
</html>